// import React from "../src/react";
// import ReactDOM,{ useState } from "../src/react-dom/client";
import React from "react";
import ReactDOM from "react-dom/client";
// import { HashRouter, BrowserRouter,Routes, Route, Link } from "react-router-dom";
import { BrowserRouter, NavLink, useRoutes } from "./react-router-dom";
import configroutes from "./react-router-dom/routesConfig";
import Post from "./pages/Post";

// const LazyPost = React.lazy(() => import('./pages/Post'));
const activeStyle = { backgroundColor: 'green' };
const activeClassName = 'active';
const activeNavProps = {
  style: ({isActive}) => isActive ? activeStyle : {},
  className: ({isActive}) => isActive ? activeClassName : "" 
}

// function App1(){
//   return (
//     <BrowserRouter>
//       <ul>
//         <li><NavLink end={true} to="/" {...activeNavProps}>首页</NavLink></li>
//         <li><NavLink to="/user" {...activeNavProps}>用户管理</NavLink></li>
//         <li><NavLink to="/profile" {...activeNavProps}>个人中心</NavLink></li>
//         {/* <li><Link to="/">首页</Link></li>
//         <li><Link to="/user">用户管理</Link></li>
//         <li><Link to="/profile">个人中心</Link></li> */}
//       </ul>
//       {/* Routes 声明式路由，有一个匹配上了， 就不匹配其他的路由了  */}
//       <Routes> 
//         <Route path="/" element={<Home />} />
//         <Route path="/login" element={<Login />}/>
//         <Route path="/user" element={<User />}>
//           <Route path="add" element={<UserAdd/>}></Route>
//           <Route path="list" element={<UserList/>}></Route>
//           <Route path="detail/:id" element={<UserDetail/>}></Route>
//         </Route>
//         <Route path="/profile" element={<Protected RouteComponent={Profile} path="/profile" />}/>
//         <Route path="/post/:id" element={<Post />}/>
//         <Route path="*" element={<Navigate to="/"  replace={false} />} />
//       </Routes>
//       {
//         useRoutes(routes)
//       }
//     </BrowserRouter>
//   )
// };

function App(){
  // hooks只能用函数组件里
  const [ routes, setRoutes ] = React.useState(configroutes);
  const addRoute = () => {
    // setRoutes((prevRoutes) => [
    //   ...prevRoutes,
    //   {
    //     path: "/post/:id",
    //     // element: <Post />
    //     element: (
    //       <React.Suspense fallback={<div>loading...</div>}>
    //         <LazyPost />
    //       </React.Suspense>
    //     )
    //   }
    // ]);
  };

  return (<div>
      {useRoutes(routes)}
      <button onClick={addRoute}>增加Post路由</button>
    </div>
  )
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( 
  <BrowserRouter>
    <ul>
      <li><NavLink end={true} to="/" {...activeNavProps}>首页</NavLink></li>
      <li><NavLink to="/user" {...activeNavProps}>用户管理</NavLink></li>
      <li><NavLink to="/profile" {...activeNavProps}>个人中心</NavLink></li>
      <li><NavLink to="/post/10" {...activeNavProps}>文章</NavLink></li>
    </ul>
    <App />
  </BrowserRouter>
);
